<template>
  <div style="width:100%;height:100%;min-width: 350px;" :id="visite_id"></div>
</template>

<script>
  import echarts from 'echarts';
  export default {
    name: 'visiteVolume',
    props: ['xDataArr', 'yDataArr', 'visite_volume_id', 'xDataTitle', 'div_width', 'color', 'rotate45'],
    data () {
      return {
        xDataList: [],
        yDataList: [],
        visite_id: '',
        title: '',
        div_w: 350,
        default_color: '#2196F3',
      };
    },
    created: function () {
      var _this = this;
      _this.xDataList = _this.xDataArr;
      _this.yDataList = _this.yDataArr;
      _this.visite_id = 'id_' + _this.visite_volume_id;
      _this.title = _this.xDataTitle;
      _this.div_w = _this.div_width ? _this.div_width : _this.div_w;
      _this.default_color = _this.color ? _this.color : _this.default_color;
      _this.init();
    },
    watch: {
      'yDataArr': function () {
        var _this = this;
        if (_this.yDataArr && _this.yDataArr.length > 0) {
          _this.xDataList = _this.xDataArr;
          _this.yDataList = _this.yDataArr;
          _this.visite_id = 'id_' + _this.visite_volume_id;
          _this.title = _this.xDataTitle;
          _this.div_w = _this.div_width ? _this.div_width : _this.div_w;
          _this.default_color = _this.color ? _this.color : _this.default_color;
          _this.init();
        }
      }
    },
    mounted () {
    },
    methods: {
      init: function () {
        var _this = this;
        this.$nextTick(() => {
          if (_this.div_w > 350) {
            $('#' + _this.visite_id).css({"width": _this.div_w + "px"});
            $('#' + _this.visite_id).css({"minWidth": _this.div_w + "px"});
          }
          var visite_id = _this.visite_id;
          let visiteVolume = echarts.init(document.getElementById(visite_id));

          const option = {
            title: {
              text: _this.title,
              x: 'center',
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              top: '40px',
              left: '10px',
              right: '10px',
              bottom: '5px',
              containLabel: true
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            animation: true,
            // 加载动画
            animationDuration: function (idx) {
              // 越往后的数据延迟越大
              return idx * 300;
            },
            animationDurationUpdate: function (idx) {
              // 越往后的数据延迟越大
              return idx * 300;
            },
            animationDelay: function (idx) {
              // 越往后的数据延迟越大
              return idx * 300;
            },
            animationDelayUpdate: function (idx) {
              // 越往后的数据延迟越大
              return idx * 300;
            },
            xAxis: {
              type: 'category',
              data: _this.xDataList,//['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
              nameTextStyle: {
                color: '#c3c3c3'
              },
              axisLabel: {
//              interval: 0,
                rotate: _this.rotate45 ? 45 : 0,
                margin: 5,
              },
              axisPointer: {
                type: 'shadow'
              }
            },
            series: [
              {
                name: '数量',
                type: 'bar',
                data: _this.yDataList,//[2, 3, 4, 5, 6, 7, 3]
                itemStyle: {
                  normal: {
                    //以下为是否显示，显示位置和显示格式的设置了
                    label: {
                      show: true,//显示数字
                      position: 'top',
                      formatter: '{c}'
                    },
                    // 定制显示（按顺序）
                    color: _this.default_color,
                    /*color: function (params) {
                     var colorList = [
                     '#C62828',
                     '#AD1457',
                     '#6A1B9A',
                     '#283593',
                     '#1565C0',
                     '#0277BD',
                     '#00838F',
                     '#00695C',
                     '#2E7D32',
                     '#558B2F',
                     '#F9A825',
                     '#FF8F00',
                     '#EF6C00',
                     '#D84315'
                     ];
                     return colorList[params.dataIndex]
                     }*/
                  }
                }
              }
            ]
          };

          visiteVolume.setOption(option);

          window.addEventListener('resize', function () {
            visiteVolume.resize();
          });
        });
      },
    },
  };
</script>
